<template>
  <div class="login">
    <div class="logo">
      <div>你好，欢迎使用</div>
      <div>
        <span></span>
        <span>地震预警工程应用平台</span>
        <span></span>
      </div>
    </div>
    <div class="login_info">
      <van-form @submit="onSubmit">
        <van-field
          v-model="loginInfo.tenants"
          placeholder="点击选择租户"
          :rules="[{ required: true, message: '请选择租户' }]"
          @click="showPicker = true"
          readonly
          v-if="columns && columns.length >= 2"
        />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <van-picker
            :columns="columns"
            :model-value="pickerValue"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        /></van-popup>
        <van-field
          v-model="loginInfo.username"
          :rules="[{ required: true, message: '请填写用户名' }]"
          clearable
          placeholder="请输入账号"
        />
        <van-field
          class="password"
          v-model="loginInfo.password"
          clearable
          right-icon="eye-o"
          @click-right-icon="clickRight"
          :rules="[{ required: true, message: '请填写密码' }]"
          :type="type"
          placeholder="请输入密码"
        />
        <!-- <div class="login_remember">
          <van-checkbox name="a" shape="square" v-model="loginInfo.remember">记住密码</van-checkbox>
        </div> -->
        <van-button type="primary" native-type="submit" :loading="loading">登录</van-button>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { ref } from 'vue'
import { pick } from 'lodash-es'
import { useUserStore } from '@/stores/modules'
import { bindLogin, tenantOption } from '@/api/login'
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route,'route');

const userInfo = useUserStore()
// console.log(userInfo.token, 'userInfo')
const columns = ref([])
//获取租户列表
const getTenantOption = async () => {
  const result = await tenantOption()
  console.log(result, 'result')

  columns.value = result.data.map((i) => {
    return {
      text: i.label,
      value: i.value,
    }
  })
}
getTenantOption()
const loginInfo = ref({
  tenants: '',
  username: '',
  password: '',
  remember: false,
})
const pickerValue = ref()

const onConfirm = ({ selectedValues, selectedOptions }) => {
  loginInfo.value.tenants = selectedOptions[0]?.text
  pickerValue.value = selectedValues
  showPicker.value = false
}

const showPicker = ref(false)
const loading = ref(false)
const onSubmit = async (values) => {
  loading.value = true
  const params = pick(loginInfo.value, ['username', 'password', 'remember'])
  if (columns.value.length < 2) {
    params.tenantCode = columns.value[0]?.value
  } else {
    params.tenantCode = pickerValue.value[0]
  }
  params.openId = userInfo.openId
  const result = await bindLogin(params)
  loading.value = false
  if (result.code !== 200) return
  userInfo.SET_BIND('1')
  userInfo.SET_TOKEN(result.token)
  console.log(userInfo.query, '--------------------------')
  if (userInfo.query?.state) {
    console.log('11')

    router.push({
      path: `/${userInfo.query.state}`,
      query: userInfo.query,
    })
  } else {
    router.push('/dashboard')
  }
}
const type = ref('password')
const clickRight = () => {
  type.value = type.value === 'password' ? 'text' : 'password'
}
</script>

<style scoped lang="scss">
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  height: 100vh;
  background: url('@/assets/images/login_bg.png') no-repeat center;
  background-size: 100% 100%;
  .logo {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    div {
      &:first-child {
        font-size: 58px;
        color: #121212;
        line-height: 58px;
        margin: 177px 0 40px;
      }
      &:last-child {
        display: flex;
        height: 80px;
        margin-bottom: 134px;
        span {
          &:first-child {
            width: 24px;
            height: 30px;
            align-self: flex-start;
            background: url('@/assets/images/login_left.png') no-repeat center;
            background-size: 100%;
          }
          &:nth-child(2) {
            align-self: center;
            color: #0c7e94;
            font-weight: 700;
            font-size: 50px;
          }
          &:last-child {
            width: 24px;
            height: 30px;
            align-self: flex-end;
            background: url('@/assets/images/login_right.png') no-repeat center;
            background-size: 100%;
          }
        }
      }
    }
  }
  &_info {
    width: 80%;
    :deep(.van-button) {
      width: 100%;
      border-radius: 12px;
      background: #0f95af;
      border: none;
      font-size: 30px;
      height: 6vh;
    }
    :deep(.van-cell) {
      &::after {
        display: none;
      }
      height: 146px;
      background-color: transparent;
      font-size: 30px;
      // border-radius: 12px;
      align-items: flex-start;
      // margin-bottom: 54px;
      padding: 0;
      .van-field__error-message {
        position: absolute;
        bottom: -48px;
      }
      .van-field__control {
        width: 600px;
        height: 98px;
        background-color: #fff;
        border-radius: 12px;
        padding: 0 24px;
      }
      .van-field__left-icon {
        width: 30px;
      }
      .van-field__right-icon {
        height: 32px;
        position: absolute;
        top: 50%;
        left: 530px;
      }
      .van-icon {
        position: relative;
        &::before {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 30px;
        }
      }
    }
  }
  &_remember {
    font-size: 30px;
    height: 40px;
    margin-bottom: 54px;
    :deep(.van-checkbox) {
      display: flex;
      align-items: center;
      height: 100%;
      .van-icon {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        position: relative;
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30px;
          line-height: 30px;
          width: 100%;
          height: 100%;
        }
      }
      .van-checkbox__icon {
        display: flex;
        align-items: center;
      }
    }
  }
}
.password {
  :deep(.van-icon-clear) {
    right: 60px;
  }
}
:deep(.van-icon-clear) {
  position: relative;
  height: 30px;
  transform: translateX(-60px);

  &::before {
    top: 0;
    left: 0;
  }
}
</style>
